<template>
  <div class="my-comment-container">
    <div
      class="my-comment-content"
      style="width: 100%; height: 680px; overflow-y: auto"
    >
      <div
        v-for="(item, index) in myCommentInfo"
        :key="index"
        style="padding: 6px 20px"
      >
        <el-card class="comment-box-card" style="padding: 12px">
          <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="6">
              <div
                class="article-title"
                style="
                  text-align: left;
                  border-right: 2px solid gray;
                  height: 50px;
                "
              >
                <el-link
                  target="_blank"
                  @click="goBlogDetail(item.knowledgeId)"
                >
                  {{ item.title }}
                </el-link>
              </div></el-col
            >
            <el-col :span="16">
              <div
                class="article-comment-content"
                style="
                  text-align: left;
                  border-right: 2px solid gray;
                  overflow: hidden;
                  height: 50px;
                "
              >
                {{ item.comment }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="like-icon">
                <i
                  class="el-icon-error"
                  @click="deleteMyComment(item)"
                  :style="{
                    fontSize: '24px',
                    color: item.state === 0 ? '#F56C6C' : '#909399',
                    cursor: 'pointer',
                  }"
                ></i>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="my-comment-pagination">
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-col :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :prev-text="`上一页`"
            :next-text="`下一页`"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { deleteComment, getAllMyComment } from "@/apis/apis";
@Component({
  name: "myComment",
})
export default class myComment extends Vue {
  // 可能在一篇文章下进行多次评论id不唯一，不能设置为前端的keY
  // commentType用户标记是一级评论还是二级评论，0是一级评论，1是二级评论
  myCommentInfo: [
    {
      knowledgeId: number;
      commentId: number;
      commentType: number;
      title: string;
      comment: string;
      state: number;
    }
  ] = [
    {
      knowledgeId: 1,
      commentId: 1,
      commentType: 0,
      title: "文章标题",
      comment: "评论内容",
      state: 0,
    },
  ];
  // 总的文章收藏数
  total: number = 0;
  pageSize: number = 10;
  pageIndex: number = 1;
  mounted() {
    this.getUserAllComments(this.pageIndex, this.pageSize);
  }
  // 获取用户的所有评论信息
  getUserAllComments(pageNum: number, pageSize: number) {
    getAllMyComment(pageNum, pageSize)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("获取我的评论成功");
          this.total = res.data.data.total;
          let resData = res.data.data.records;
          // 清空数据
          this.myCommentInfo = [] as any;
          resData.forEach((item: any) => {
            this.myCommentInfo.push({
              knowledgeId: item.knowledgeId,
              commentId: item.id,
              commentType: item.commentType,
              title: item.title,
              comment: item.comment,
              state: 0,
            });
          });
        } else {
          this.$message.error("获取我的评论失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

  // 2.查看文章的详细信息
  goBlogDetail(knowledgeId: number) {
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: id,
      },
    });
    window.open(route.href, "_blank");
  }

  // 3.删除我的评论
  deleteMyComment(item: any) {
    item.state = item.state === 0 ? 1 : 0;
    deleteComment(item.commentId, item.commentType)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("删除我的评论成功");
        } else {
          this.$message.error("删除我的评论失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 4.切换页面大小时重新请求
  handleSizeChange(val: number): void {
    this.pageSize = val;
    this.getUserAllComments(this.pageIndex, this.pageSize);
  }
  // 5.处理当前页面的切换
  handleCurrentChange(val: number): void {
    this.pageIndex = val;
    this.getUserAllComments(this.pageIndex, this.pageSize);
  }
}
</script>

<style lang="scss" scoped>
</style>